<template>
  <basic-dialog
    :visible.sync="submitVisible"
    :title="'提交'"
    :width="'70%'"
    :handleClose="handleCloseDialog"
    :handleOpen="handleOpenDialog"
    :okText="'提交'"
    :handleOk="handleSubmit"
    :loadingBtn="submitLoading"
  >
    <BasicTable
      :showTotal="false"
      :dataSource="tableInfo.list"
      :columns="tableInfo.columns"
      :loading="tableInfo.loading"
      :tableHeight="480"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/skusTable';
import {
  submitBeforeAbnormalPurchaseService,
  submitAbnormalPurchaseService
} from '@api/purchase/abnormalPurchase';

export default {
  name: 'SubmitDialog',
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    submitVisible: {
      type: Boolean,
      default: false
    },
    purchaseId: {
      type: Number
    }
  },
  data () {
    return {
      submitLoading: false,
      tableInfo: {
        list: [],
        loading: false,
        columns: [
          {
            title: '异常类型',
            key: 'approvalTypeTemplate',
          },
          {
            title: '异常原因',
            key: 'concreteExpCause',
          },
          {
            title: '异常原因描述',
            key: 'content',
          },
          {
            title: '异常原因更正',
            key: 'abnormalReasonChangeId',
            required: true,
            width: 160,
            render: (h, { row }) => {
              return <el-select size='mini' v-model={row.abnormalReasonChangeId} onChange={val => { this.handleReasonChange({ val, row }) }}>
                { row.abnormalReasonChangeSelect.map(item => <el-option key={item.value} value={item.value} label={item.label} />) }
              </el-select>
            }
          },
          {
            title: '异常原因描述更正',
            key: 'abnormalReasonDescribeChange',
            required: true,
            width: 250,
            render: (h, { row }) => {
              return <el-input
                size='mini'
                v-model={row.abnormalReasonDescribeChange}
                placeholder={row.remark || '请输入异常原因描述'}
                maxlength="200"
                show-word-limit
              />
            }
          }
        ],
      },
    };
  },
  methods: {
    handleOpenDialog () {
      // this.getTableData()
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:submitVisible', false);
    },
    // 获取表格数据
    async getTableData () {
      const res = await submitBeforeAbnormalPurchaseService(
        { abnormalPurchaseId: this.purchaseId },
        state => { this.tableInfo.loading = state }
      );
      if (res?.data) {
        this.$emit('update:submitVisible', true);
        this.tableInfo.list = res.data;
      }
    },
    // 异常原因变更
    handleReasonChange (data) {
      const { val, row } = data
      const { label, describe } = row.abnormalReasonChangeSelect.find(item => item.value == val)
      this.$set(row, 'abnormalReasonChange', label)
      this.$set(row, 'remark', describe)
    },
    // 提交
    async handleSubmit () {
      if (this.tableInfo.list.some(item => !item.abnormalReasonChangeId || !item.abnormalReasonDescribeChange)) {
        return this.$message.warning('异常原因更正、异常原因描述更正不能为空')
      }
      const res = await submitAbnormalPurchaseService(
        { abnormalPurchaseId: this.purchaseId, purchaseSkuPriceExpTypeList: this.tableInfo.list },
        state => { this.tableInfo.loading = state }
      );
      if (res) {
        this.$message.success('提交成功')
        this.$emit('getTableData')
        this.handleCloseDialog()
      }
    }
  }
};
</script>
